<template>
  <div class="knowledge-base">
    <div class="page-header">
      <h2>知识库管理</h2>
      <el-button type="primary">
        <el-icon><Plus /></el-icon>
        新建知识库
      </el-button>
    </div>
    
    <el-card>
      <div class="knowledge-grid">
        <div v-if="knowledgeBases.length === 0" class="empty-state">
          <el-icon class="empty-icon"><Document /></el-icon>
          <p>暂无知识库</p>
          <el-button type="primary">创建知识库</el-button>
        </div>
        
        <div v-else>
          <div
            v-for="kb in knowledgeBases"
            :key="kb.id"
            class="knowledge-item"
          >
            <h4>{{ kb.name }}</h4>
            <p>{{ kb.description }}</p>
            <div class="knowledge-stats">
              <span>{{ kb.document_count }} 文档</span>
              <span>{{ formatSize(kb.total_size) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus, Document } from '@element-plus/icons-vue'

const knowledgeBases = ref([])

const formatSize = (size) => {
  const units = ['B', 'KB', 'MB', 'GB']
  let index = 0
  while (size >= 1024 && index < units.length - 1) {
    size /= 1024
    index++
  }
  return `${size.toFixed(1)} ${units[index]}`
}
</script>

<style scoped lang="scss">
.knowledge-base {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  
  .empty-icon {
    font-size: 64px;
    color: var(--el-text-color-placeholder);
    margin-bottom: 20px;
  }
}

.knowledge-item {
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  
  h4 {
    margin: 0 0 10px 0;
  }
  
  p {
    margin: 0 0 10px 0;
    color: var(--el-text-color-regular);
  }
  
  .knowledge-stats {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--el-text-color-placeholder);
  }
}
</style>